<template>
    <div class="personal-container">
        <el-card class="profile-card">
            <div class="profile-content">
                <el-avatar 
                    :size="120" 
                    :src="avatarSrc"
                    class="user-avatar"
                />
                <h2 class="user-name">{{ nickname || username }}</h2>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/store/auth';
import { storeToRefs } from 'pinia';
import avatarImg from '@/assets/avater.jpg';

const userStore = useUserStore();
const { username, nickname } = storeToRefs(userStore);
const avatarSrc = ref(avatarImg);
</script>

<style lang="less" scoped>
.personal-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 20px;
    
    .profile-card {
        width: 100%;
        max-width: 400px;
        text-align: center;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        
        .profile-content {
            padding: 40px 20px;
            
            .user-avatar {
                margin-bottom: 20px;
                border: 4px solid #f0f0f0;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
            
            .user-name {
                font-size: 28px;
                font-weight: 600;
                color: #2c3e50;
                margin: 0;
                letter-spacing: 2px;
            }
        }
    }
}
</style>